<script lang="ts" setup>
import {onMounted, reactive, ref, watch} from 'vue'
import { requestSingerCateList } from '../../utils/axiosURL'
import indexText from './index.json'

// 语种下标
let initIndex = ref<number>(0)
// 分类下标
let  cateIndex = ref<number>(0)
// 筛选下标
let screeningIndex = ref<number>(0)
// 语种的code
let initCode = ref<string>('-1')
// 分类的code
let cateCode = ref<string>('-1')
// 筛选的code
let screeningCode = ref<string>('-1')
// 存储所有歌手数据
const allSingerData = reactive<any>([])


// 点击具体分类项的事件处理函数
const changeInitIndex = (idx: number, name: string, index: number, code: string) => {
  switch (index) {
    case 0 :
      initIndex.value = idx
      initCode.value = code
      break;
    case 1 :
      cateIndex.value = idx
      cateCode.value = code
      break;
    case 2 :
      screeningIndex.value = idx
      screeningCode.value = code
      break;
    default:
      break
  }
}

// 请求所有歌手列表
const requestSingerCateListFn = () => {
  requestSingerCateList(initCode.value, cateCode.value, screeningCode.value).then((data: any) => {
    allSingerData.values = data.artists
  }).catch(err => {
    console.log(err)
  })
}

// 监听 code 的变化
watch([initCode, cateCode, screeningCode], () => requestSingerCateListFn())
onMounted(() => {
  requestSingerCateListFn()
})

</script>

<template>
  <div class="totalWrap">
    <div class="categoryWrap">
      <div class="cateItem">
        <p class="musicCateItem">{{ indexText.CategoryData[0].itemName }}: </p>
        <ul>
          <li
              v-for="(i, idx) in indexText.CategoryData[0].moreCategory"
              :class="idx === initIndex  ? 'activeItem' : ''"
              @click="changeInitIndex(idx, i.name, 0, i.code)"
          >{{ i.name }}</li>
        </ul>
      </div>
      <div class="cateItem">
        <p class="musicCateItem">{{ indexText.CategoryData[1].itemName }}: </p>
        <ul>
          <li
              v-for="(i, idx) in indexText.CategoryData[1].moreCategory"
              :class="idx === cateIndex  ? 'activeItem' : ''"
              @click="changeInitIndex(idx, i.name, 1, i.code)"
          >{{ i.name }}</li>
        </ul>
      </div>
      <div class="cateItem">
        <p class="musicCateItem">{{ indexText.CategoryData[2].itemName }}: </p>
        <ul>
          <li
              v-for="(i, idx) in indexText.CategoryData[2].moreCategory"
              :class="idx === screeningIndex  ? 'activeItem' : ''"
              @click="changeInitIndex(idx, i.name, 2, i.code)"
          >{{ i.name }}</li>
        </ul>
      </div>
    </div>
    <div class="SingerWrap" v-if="allSingerData.values.length">
      <div class="singerItem" v-for="item in allSingerData.values">
        <RouterLink :to="`/SingerDetail/${item.id}`">
          <div class="topImg">
            <img :src="item.picUrl" alt="">
          </div>
        </RouterLink>
        <div class="btmText">
          <p>{{ item.name }}</p>
        </div>
      </div>
    </div>
    <div class="SingerWrap" v-else>
      <playListIntroduceSkeleton v-for="item in 10" />
    </div>
  </div>
</template>


<style lang="scss" scoped>
.totalWrap {
  width: 100%;
  height: 93%;
  padding: 0 0 80px 0;
  box-sizing: border-box;
  overflow: auto;

  .categoryWrap {
    width: 100%;
    margin-top: 15px;

    .cateItem {
      display: flex;
      width: 100%;   // 宽度 100% 会继承 父级元素的宽度

      .musicCateItem {
        flex-basis: 40px;
        font-size: $font-size-xs;
        font-family: $textFont;
        color: $font_main_color;
        line-height: 23px;
        margin-bottom: 10px;
      }

      ul {
        display: flex;
        flex-wrap: wrap;
        flex: 1;
        overflow: hidden;

        li {
          position: relative;
          font-size: $font-size-xs;
          font-family: $textFont;
          color: $font_main_color;
          width: 55px;
          text-align: center;
          padding: 4px 10px;
          border-radius: 25px;
          margin-right: 22px;
          margin-bottom: 10px;

          // 兄弟选择器 ~ / 相邻选择器 +
          & ~ li {
            &::before {
              position: absolute;
              top: 4px;
              left: -12px;
              content: "";
              width: .5px;
              height: 14px;
              background-color: $lineColor;
            }
          }
        }

        .activeItem {
          // color: $font_red_color;
          // background-color: rgb(254,245,245);
          @include background_color('bk_color');
          @include color('color');
        }
      }
    }
  }

  .SingerWrap {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 20px;

    .singerItem {
      width: 18%;
      margin: 0 10px 10px 0;

      .topImg {
        width: 100%;
        height: 140px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 6px;
        }
      }

      .btmText {
        font-family: $textFont;
        font-size: $font-size-sm;
        line-height: 20px;
      }
    }
  }
}

:deep(.el-skeleton) {
  margin: 0 15px 0 0;
}


/* // 歌单图片响应式设置 */
@media screen and (min-width: 1100px) {
  .topImg {
    height: 150px !important;
  }
}

@media screen and (min-width: 1130px) {
  .topImg {
    height: 157px !important;
  }
}

@media screen and (min-width: 1160px) {
  .topImg {
    height: 162px !important;
  }
}

@media screen and (min-width: 1190px) {
  .topImg {
    height: 164px !important;
  }
}

@media screen and (min-width: 1220px) {
  .topImg {
    height: 170px !important;
  }
}

@media screen and (min-width: 1250px) {
  .topImg {
    height: 176px !important;
  }
}

@media screen and (min-width: 1280px) {
  .topImg {
    height: 182px !important;
  }
}

@media screen and (min-width: 1310px) {
  .topImg {
    height: 188px !important;
  }
}

@media screen and (min-width: 1340px) {
  .topImg {
    height: 194px !important;
  }
}

@media screen and (min-width: 1370px) {
  .topImg {
    height: 200px !important;
  }
}

@media screen and (min-width: 1400px) {
  .topImg {
    height: 206px !important;
  }
}

@media screen and (min-width: 1430px) {
  .topImg {
    height: 210px !important;
  }
}
</style>
